JavaScript Small Application
Small applications are the best way to apply what you have learnt. Below you'll build a few mini-projects that combine HTML, CSS, and JavaScript — calculator, BMI checker, age finder and a to-do list.
What Is a Small Application?
A small application is a focused mini-project that solves one problem — like a calculator or a BMI checker. Building them helps you connect HTML, CSS and JavaScript together and turn knowledge into skill.
Projects We Will Build
Calculator
Add, subtract, multiply, divide using buttons.
BMI Checker
Take weight & height, classify category.
Age Finder
Compute age from a birth year.
To-Do List
Add and remove tasks dynamically.
Password Generator
Random secure password with options.
Number Guess
Random number guessing game.
What You Will Practice
- DOM manipulation with
getElementByIdandinnerHTML. - Reading input fields and converting strings to numbers.
- Using
if-elseandswitchfor logic. - Working with arrays and loops to build lists.
Small Application in JavaScript
A small application in JavaScript is a simple program that performs a specific task. These applications are useful for learning event handling, DOM manipulation, link properties, styling changes, and canvas drawing.
Importance of Small Applications
- Learning and Practice: Helps beginners understand JavaScript concepts.
- Rapid Prototyping: Useful for quickly testing ideas.
- Portfolio Building: Shows practical JavaScript skills.
- Demonstration: Useful for tutorials and classroom examples.
- Personal Satisfaction: Helps learners create working projects.
Example 1 : Hash Property
The hash property returns the anchor part of a link.
<!DOCTYPE html>
<html>
<head>
<title>Hash Property</title>
</head>
<body>
<p>
<a id="A" href="https://javapba.blogspot.com/p/loop.html#pbainst">
Java Loop Programs
</a>
</p>
<p id="d"></p>
<button onclick="myFunction()">
CLICK
</button>
<script>
function myFunction(){
var x = document.getElementById("A").hash;
document.getElementById("d").innerHTML = x;
}
</script>
</body>
</html>
Example 2 : Display Hostname
The host property returns the hostname and port part of the URL.
<html>
<body>
<p>
<a id="myAnchor" href="https://javapba.blogspot.com/p/loop.html">
Example link
</a>
</p>
<button onclick="myFunction()">
CLICK
</button>
<p id="d"></p>
<script>
function myFunction(){
var x = document.getElementById("myAnchor").host;
document.getElementById("d").innerHTML = x;
}
</script>
</body>
</html>
Example 3 : Get URL of a Link
The href property returns the full URL of a link.
<html>
<body>
<a id="A" href="https://javapba.blogspot.com/">
Java Tutorials
</a>
<button onclick="myFunction()">
Try it
</button>
<p id="d"></p>
<script>
function myFunction(){
var x = document.getElementById("A").href;
document.getElementById("d").innerHTML = x;
}
</script>
</body>
</html>
Example 4 : Display Port Number
The port property returns the port number of a link.
<html>
<body>
<p>
<a id="A" href="http://www.example.com:4097/test.htm#part2">
Example link
</a>
</p>
<button onclick="myFunction()">
Try
</button>
<p id="d"></p>
<script>
function myFunction(){
var x = document.getElementById("A").port;
document.getElementById("d").innerHTML = x;
}
</script>
</body>
</html>
Example 5 : Display Username
The username property returns the username part of a URL.
<html>
<body>
<p>
<a id="A" href="https://shibshankar:ghosh@www.example.com">
Example link
</a>
</p>
<button onclick="myFunction()">
Try it
</button>
<p id="d"></p>
<script>
function myFunction(){
var x = document.getElementById("A").username;
document.getElementById("d").innerHTML = x;
}
</script>
</body>
</html>
Example 6 : Change Address Text Color
This example changes the color of an address using JavaScript.
<html>
<body>
<address id="A">
PBA INSTITUTE<br>
HOWRAH NEAR KOLKATA<br>
CALL: 9239412412
</address>
<br>
<button onclick="F()">
CLICK
</button>
<script>
function F(){
var x = document.getElementById("A");
x.style.color = "tomato";
}
</script>
</body>
</html>
HOWRAH NEAR KOLKATA
CALL: 9239412412
Example 7 : Draw Rectangular Shape
This example uses JavaScript canvas to draw a rectangular shape.
<html>
<head>
<title>Draw a rectangular shape</title>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150">
</canvas>
<script>
function draw(){
var canvas = document.getElementById("canvas");
if(canvas.getContext){
var context = canvas.getContext("2d");
context.fillRect(20,20,100,100);
context.clearRect(20,20,60,60);
context.strokeRect(45,45,50,50);
}
}
</script>
</body>
</html>
Example 8 : Draw a Face
This example uses JavaScript canvas to draw a simple face.
<!DOCTYPE html>
<html>
<head>
<title>Draw a Face</title>
</head>
<body onload="draw();">
<canvas id="canvas" width="250" height="250">
</canvas>
<script>
function draw(){
var canvas = document.getElementById("canvas");
if(canvas.getContext){
var context = canvas.getContext("2d");
context.beginPath();
context.arc(75,75,50,0,Math.PI*2,true);
context.moveTo(110,75);
context.arc(75,75,35,0,Math.PI,false);
context.moveTo(55,65);
context.arc(60,65,5,0,Math.PI*2,true);
context.arc(90,65,5,0,Math.PI*2,true);
context.stroke();
}
}
</script>
</body>
</html>
Conclusion
Small applications in JavaScript are useful for learning and practicing real programming concepts. They help students understand DOM manipulation, events, link properties, styling changes, and canvas drawing.
Important Notes
- Always validate input — convert strings to numbers with
Number(). - Keep your JS in a separate file for real projects.
- Use
constandletinstead ofvar. - Add CSS to make these mini apps visually appealing.
Real-Life Use Cases
Portfolio
Showcase mini projects on your personal website.
Learning
Build muscle memory by re-implementing each idea.
Mini Tools
BMI, currency converter, EMI as quick utilities.
Practice DOM
Each mini project teaches DOM events deeply.
Practice Questions
- Add reset and clear buttons to the Calculator project.
- Show BMI category with different colors in BMI Checker.
- Add a 'mark as done' (strike-through) feature to To-Do.
- Improve Password Generator with length and symbols options.
- Add a 'how many tries left' counter to Number Guess.
Frequently Asked Questions
| Question | Answer |
|---|---|
| Q. How many mini projects should I build? | Aim for 10–15 small projects to feel confident. |
| Q. Do I need to memorize all syntax? | No. Practice and reference docs are far more valuable than memorization. |
| Q. Can I publish my projects? | Yes — host them on GitHub Pages or Netlify for free. |
| Q. Should I use frameworks? | Start with vanilla JavaScript, then move to React or Vue. |
| Q. How do I improve a project? | Add features, polish the UI with CSS, and handle edge cases. |
Conclusion
Building small applications is the fastest path from JavaScript theory to JavaScript skill. Each tiny project teaches you DOM, events, logic, and structure — preparing you for bigger real-world apps.
JavaScript All Chapters
Continue Learning
Previous
Go to Regular Expression Chapter